<template>
<!--工单提交页面  -->
  <div class="app-container">

    <el-form ref="form"
             :model="form"
             label-width="80px">
      <!-- <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>  -->
      <el-form-item label="工单类型">
        <el-cascader  ref="myCascader"
                     :options="options"
                     :show-all-levels="false"
                     :props="defaultProps"
                     @change="handleChange"></el-cascader>
      </el-form-item>

      <!-- <el-form-item label="问题标题">
    <el-input v-model="form.title"></el-input>
  </el-form-item> -->

      <el-form-item label="问题描述" >
        <el-input type="textarea"
                  v-model="form.repairDescription" ></el-input>

      </el-form-item>

      <el-form-item label="问题截图">

        <el-upload class="avatar-uploader"
                   action="https://jsonplaceholder.typicode.com/posts/"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl"
               :src="imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>


<!--        <el-upload-->
<!--          ref="upload"-->
<!--          :limit="1"-->
<!--          accept=".jpg, .png"-->
<!--          :action="upload.url"-->
<!--          :headers="upload.headers"-->
<!--          :file-list="upload.fileList"-->
<!--          :on-progress="handleFileUploadProgress"-->
<!--          :on-success="handleFileSuccess"-->
<!--          :auto-upload="false">-->
<!--          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
<!--          <el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button>-->
<!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--        </el-upload>-->


      </el-form-item>

      <el-form-item label="优先级">
        <el-radio-group v-model="radio">
          <el-radio :label="1">重要</el-radio>
          <el-radio :label="2">一般</el-radio>
          <el-radio :label="3">严重</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <el-form-item label="匿名提交">
    <el-switch v-model="form.isAnonymous"></el-switch>
  </el-form-item> -->
      <el-form-item label="匿名提交">
        <el-tooltip :content="'Switch value: ' + value2"
                    placement="top">
          <el-switch v-model="form.isAnonymous"
                     active-value="1"
                     inactive-value="2">
          </el-switch>
        </el-tooltip>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

 <script>
import { addOrder ,questionClass} from '@/api/work/submit'
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {

      defaultProps:{
        value: 'qcId',
	      label: 'qcName',
      },
      // 上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload",
        // 上传的文件列表
        fileList: []
      }
      ,
      //这是级联选择器的值
      qcId:'',
      qcName:'',

      options: [],
      textarea: '',
      value2: '1',
      imageUrl: '',
      radio: 1,
      repairTypeV1:'',
      repairTypeV2:'',

      form: {
        repairTypeV1: this.repairTypeV1,
        repairTypeV2: this.repairTypeV2,
        isAnonymous: this.value2,
        repairPriority: this.radio,
        repairDescription: '',
        repairPicture: this.imageUrl,
        repairStatus:1,
        qualitiedStatus:1
      },
    }
  },
  created() {
    this.getList();

  },
  methods: {

    handleAdd() {

      this.upload.fileList = [];
    },

    handleUpdate(row) {

      this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
    }

    ,
    handleChange() {
        console.log(this.$refs.myCascader.getCheckedNodes()[0].pathLabels[1]);
        let label=this.$refs.myCascader.getCheckedNodes()[0].pathLabels[0];
        this.repairTypeV1=label;
        this.repairTypeV2=this.$refs.myCascader.getCheckedNodes()[0].pathLabels[1];
        this.form.repairTypeV1=this.repairTypeV1;
        this.form.repairTypeV2=this.repairTypeV2;
      },
    getList(){
      questionClass().then((res) => {
        
        this.$modal.msgSuccess('查找成功')
        // console.log(res.data);
        this.options=res.data;
        console.log(this.options);
      })
    },

    onSubmit() {
      addOrder(this.form).then((response) => {
        console.log(res);
        this.$modal.msgSuccess('新增成功')
      })
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
  },
}
</script>
 <!-- <script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }


</script>  -->

 <!-- <script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script> -->

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
